﻿@{
    ViewBag.title = "index";
    Layout = "/Views/Shared/_Layout_iframe.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RoleAdd</title>
    <style>
        .layui-btn {
            display: block;
            margin: 0 auto;
            margin-bottom: 50px;
        }
        h3 {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>角色添加页面</legend>
    </fieldset>
    <form class="layui-form" lay-filter="roleform">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="RoleName" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">底薪</label>
                <div class="layui-input-inline">
                    <input type="text" name="BaseSalary" lay-verify="required" placeholder="请输入底薪" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">提成</label>
                <div class="layui-input-inline">
                    <input type="text" name="Proportion" lay-verify="required" placeholder="请输入提成" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <input type="hidden" name="Isdelete" id="isdelete" value="0" />
        <input type="hidden" name="CreateTime" lay-verify="date" id="createTimeInput" value="" />

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>权限设置</legend>
        </fieldset>
        <div id="module-table-container"></div> <!-- 用于存放生成的表格 -->
        @*权限列表*@
        @foreach (var moudles in ViewBag.Modules)
        {
            <h3>@moudles.ModuleName</h3>
            <div class="layui-form-item" style="width: 91%; margin-left: 35px;">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll" lay-filter="selectAll" class="select-all layui-form-checkbox" /> </th>
                            <th>页面名称</th>
                            <th>页面地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ int index = 0; }
                        @foreach (var pages in ViewBag.Pages)
                        {
                            {
                                if (pages.ModuleId == moudles.Id)
                                {
                                    <tr>
                                        <td>
                                            <input type="checkbox"
                                                   class="select-item"
                                                   lay-filter="selectItem"
                                                   lay-skin="primary"
                                                   name="pages[@index].IsSelected"
                                                   @if (pages.IsChecked) { <text> checked</text> } />
                                            <input type="hidden"
                                                   name="pages[@index].PageId"
                                                   value="@pages.Id">
                                        </td>
                                        <td>
                                            <input type="text"
                                                   class="layui-input"
                                                   value="@pages.PageName"
                                                   name="pages[@index].PageName">
                                        </td>
                                        <td>
                                            <input type="text"
                                                   class="layui-input"
                                                   value="@pages.PageUrl"
                                                   name="pages[@index].PageUrl">
                                        </td>
                                    </tr>
                                    index++;
                                }
                            }
                        }
                    </tbody>
                </table>
            </div>
        }

        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1" style="margin-bottom:50px;">保存</button>
        <input type="hidden" name="id" id="hfid" value="@ViewBag.Id" />


    </form>
    <script>
        var table;
        layui.use(['table', 'form', 'layer', 'util'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
           
            let roleId = $("#hfid").val();
            if (roleId > 0) {
                $.post("/role/getrole/" + roleId, function (resp) {
                    //console.log(resp)
                    if (resp.code == 0) {
                        resp.data.CreateTime = util.toDateString(resp.data.CreateTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd');
                        form.val('roleform', resp.data)
                    }
                })
            }
            // 为保存按钮添加点击事件处理逻辑
            // 页面加载时设置当前日期到 CreateTime 输入框
            window.onload = () => {
                const [year, month, day] = new Date().toISOString().split('T')[0].split('-');
                const formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
                document.getElementById('createTimeInput').value = formattedDate;
            };

            //form提交事件
            form.on('submit(demo1)', function (data) {
                // 获得选中的pageId
                let selectedPageIds = [];
                $('.select-item').each(function (index) {
                    if (this.checked) {
                        let PageId = $(this).closest('tr').find('input[name$=".PageId"]').val();
                        console.log(PageId)
                        selectedPageIds.push(PageId);
                    }
                });
                console.log(selectedPageIds); // 打印选中的 pageId 数组

                if (roleId > 0) {
                    data.field.Id =roleId;
                    //更新
                    $.post("/role/Update", {  productData: encodeURIComponent(JSON.stringify(data.field)) , selectedPageIds:JSON.stringify(selectedPageIds) }, function (resp) {
                        if (resp.code == 0) {
                            layer.msg('更新成功',{ time: 1000 }, function () {
                                // 父页面的table重载
                                parent.table.reload('testRole');
                                // 关闭弹出层
                                var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        }
                    });
                } else {
                    //添加
                    $.post("/role/Insert", {  productData: encodeURIComponent(JSON.stringify(data.field)) , selectedPageIds: JSON.stringify(selectedPageIds) }, function (resp) {
                        if (resp.code == 0) {
                            layer.msg('添加成功',{ time: 1000 }, function () {
                                // 父页面的table重载
                                parent.layui.table.reload('testRole');
                                // 关闭弹出层
                                var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        }
                    });
                }
                return false;
            });
        });
    </script>
</body>
</html>    